<template>
  <div :style="sy1" >
    <div class="bans ">
      <div class="bg">
        <!-- <a href="javascript:;" class="ban-img"> -->
           <router-link :to="{
             path:jump_type,
             query:{
               id:banner[b_num].targetId
             }
           }" class="ban-img"> 
           <!-- <a href="javascript:;" class="ban-img"> -->
          <img :src="u_s" :style="sy3"/>
          <ul class="dots">
            <li
              v-for="index in banner.length"
              :key="index"
              :class="index - 1 == b_num ? 'click_b' : 'click_bg1'"
              @mousedown="sw_p(index)"
            ></li>
          </ul>
        <!-- </a> -->
      </router-link>
        <div class="download">
          <a href="javascript:;" class="btn"> </a>
        </div>
        <a href="javascript:;" class="btnl" @mousedown="p_picture"></a>
        <a href="javascript:;" class="btnr" @mousedown="next_picture"></a>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "MusicHome",
  data() {
    return {
      u_s: "",
      sy1: {
        backgroundImage: "",
        backgroundSize:'6000px',
        backgroundPosition:'center center',
        
      },
      sy3: {
        opacity: "1",
        transition: "none 0s ease 0s",
      },
      banner: [{
        targetId:''
      }],
      b_num: 0,
      setI: "",
      f_setIl: "",
      f_cleset: "",
      
    };
  },
  mounted() {
       
   axios.get("http://localhost:8080/api/banner",{
     params:{
       type:0
     }
   }).then((response) => {
    
      this.banner = response.data.banners;
      this.u_s = response.data.banners[0].imageUrl;
    });

    // 设置轮播图间隔器
    this.f_setIl = () => {
      this.setI = setInterval(() => {
        this.sy3.opacity = "0.2";
        this.sy3.transition = "opacity 1s ease-in 0s";
        setTimeout(() => {
          this.sy3.opacity = "1";
          this.sy3.transition = "opacity 1s ease-out 0s";
          if (this.banner.length > this.b_num + 1) {
            this.b_num++;
          } else {
            this.b_num = 0;
          }

          setTimeout(() => {
            (this.sy3.opacity = "1"), (this.sy3.transition = "none 0s ease 0s");
          }, 1000);
        }, 1000);
      }, 5000);
    };

    // 清除轮播图间隔器
    this.f_cleset = () => {
      clearInterval(this.setI);
    };
    // 开启间隔机器
    this.f_setIl();

    
  },
  computed:{
    jump_type(){
      
    
           if (this.banner.length) {
             
           if (this.banner[this.b_num].targetType == 1000) {
                return '/playlist'
           }else if (this.banner[this.b_num].targetType == 1) {
              return '/song'
           }else if (this.banner[this.b_num].targetType == 10) {
              return '/album'
           }else {
             return ''
           } 

           }else {
             return '/'
           }
         
        
        
        
    }
        
    
  },
  methods: {
    // 下一张轮播图
    next_picture() {
      this.f_cleset();
      if (this.banner.length > this.b_num + 1) {
        this.b_num++;
      } else {
        this.b_num = 0;
      }
      this.$nextTick(() => {
        this.f_setIl();
      });
    },

    p_picture() {
      this.f_cleset();
      if (this.b_num - 1 >= 0) {
        this.b_num--;
      } else {
        this.b_num = this.banner.length - 1;
      }
      this.$nextTick(() => {
        this.f_setIl();
      });
    },
    sw_p(index) {
      this.f_cleset();
      this.b_num = index - 1;
      this.$nextTick(() => {
        this.f_setIl();
      });
    },
    
    
  },
  watch: {
    b_num(value) {
      this.u_s = this.banner[value].imageUrl;
         
    
    },
       u_s(value) {
      
      this.sy1.backgroundImage =
        'url("' + value.split("&")[0] + '?imageView&blur=40x20")';
    },


    },
  

};
</script>

<style lang="less" scoped>
 .bans {
   width: 982px;
   height: 285px;
   position: relative;
   margin: 0 auto;

 }
.ban {
  width: 100%;
}



.bg {
  margin: 0 auto;
  width: 980px;
  height: 285px;
  .ban-img {
    float: left;

    width: 730px;
    height: 100%;
    img {
      float: left;
      width: 730px;
      height: 285px;
    }
  }
}
.download {
  float: left;
  .btn {
    display: inline-block;
    width: 250px;
    height: 285px;
    background: url(../images/download.png) no-repeat 0 0;
  }
}
.btnl {
  position: absolute;
  top: 111px;
  left: -68px;
  width: 37px;
  height: 63px;
  background: url(../images/banner.png) no-repeat 0 -360px;
}
.btnr {
  position: absolute;
  top: 111px;
  right: -68px;
  width: 37px;
  height: 63px;
  background: url(../images/banner.png) no-repeat 0 -508px;
}
.dots {
  position: absolute;

  bottom: 0px;
  width: 730px;
  text-align: center;

  li {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../images/banner.png);
    background-repeat: no-repeat;
  }
}
.click_bg1 {
  background-position: 3px -343px;
}
.click_b {
  background-position: -16px -343px;
}
</style>